<template>
  <view class="container">
    <view class="header">
      <view class="uni-list-cell-db time">
        <picker mode="date" :value="date" @change="bindDateChange" fields="month">
          <view class="uni-input">{{formatDate}} ^</view>
        </picker>
      </view>
    </view>
    <view class="body">
      <view class="item" v-for="item in accountList" :key="item.id">
        <view class="item-left" @click="gotoDriverDetail(item)">
          <text class="watch-contact-method">查看{{isDriver? '货主':'司机'}}联系方式</text>
          <text>{{item.createTime}}</text>
        </view>
        <view class="item-right">-{{item.amount}}</view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: {},
        accountList: [],
        date: new Date().toLocaleDateString(),
        isDriver: false,
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0
      };
    },

    computed: {
      formatDate() {
        return this.formatDateFun(this.date)
      }
    },
    onLoad({
      type
    }) {
      if (type == 2) {
        this.isDriver = true
      }
      this.getUserInfo()
      this.getAccountList()
    },
    methods: {
      formatDateFun(time) {
        const date = new Date(time)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1 + '').padStart(2, '0')
        return year + '-' + month
      },
      bindDateChange(e) {
        this.date = e.detail.value
        this.accountList = []
        this.getAccountList()
      },
      // 跳转到实际详情页
      gotoDriverDetail(item) {
        if (!item.demandId) return
        if (item.demandType == 3) {
          uni.navigateTo({
            url: "/pages/huoyuan_order_detail/huoyuan_order_detail?id=" + item.demandId
          })
        } else if (item.demandType == 4) {

        }
        uni.navigateTo({
          url: '/pages/celiang_order_detail/celiang_order_detail?id=' + item.demandId
        })
      },
      // 得到用户信息
      getUserInfo() {
        this.userInfo = uni.getStorageSync('userInfo')
      },
      async getAccountList() {
        this.isLoading = true
        uni.showLoading({
          title: '加载中...'
        })
        const res = await uni.gRequest.get(`/app/bill/list`, {
          createTime: this.formatDate,
          orderType: this.type ? 2 : 1,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.accountList = [...this.accountList, ...res.rows] || []
        // 实现分页功能
        this.total = res.total
        this.isLoading = false
        uni.hideLoading()
      }
    },
    // 触底刷新
    onReachBottom() {
      if (this.isLoading) return
      if (this.pageNum * this.pageSize >= this.total) {
        return uni.showToast({
          title: '已加载到底部...',
          duration: 500,
          icon: 'none'
        })
      }
      this.pageNum++
      this.getAccountList()
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 0 30rpx;
  }

  .header {
    border-top: 1rpx #eee solid;
    padding: 30rpx;

    .time {
      display: inline-block;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 1rpx solid #999999;
      padding: 12rpx 18rpx;
    }
  }

  .body {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 40rpx 30rpx;

  }

  .item {
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx #999 dotted;
    padding-bottom: 30rpx;

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }

    .item-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;

      .watch-contact-method {
        margin-bottom: 14rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }
    }

    .item-right {
      font-size: 36rpx;
      color: #FC470F;
    }
  }
</style>
